SlideShare a Scribd company logo
Web Apps
  2010.08.18
Web App vs Native App
• Web App            ?
  web app
  web app                    iTunes App Store

  Object-C


• Native App             ?
  Object-C
  iTunes App Store
Web App vs Native App
            Web App                                         Native App

          HTML, CSS, Javascript                       Objective-C(iPhone), Java(Android)

                                                      XCode(iPhone), Eclipse(Android)
                      , iUI, jQTouch...         Cocoa Touch(iPhone), UI Framework(Android)
            Mac                                 Mac         (iPhone), Android

      App                                                       $99(iPhone) or $35(Android)

                         -         /      ...

                                                App Store/Market                /       &

                                                                                    (iPhone)

 Android/Blackberry
HTML5                               ?


•
                 iPhone, Android
                   HTML5
    WebKit

•
    iOS, Android, Blackberry,      , Windows
    Mobile, Windows Phone 7

Recommended for you

Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.

A presentation about Ionic SDK in the first meetup of Google Developers Group (GDG) in Feira de Santana, Bahia, Brazil.

gdgionic
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)

Mistakes, misconceptions, over-indulgences, minutia, and generally silly aspects of modern web accessibility. Presented at SXSWi 2010.

Building iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360FlexBuilding iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360Flex

Join us for a session on building incredible iPad apps with Flex. Too good to be true? Actually the Flex SDK has a whole set of components and classes suited to easily build iPad apps. I would even say it's the fastest and easiest way to build iPad apps out there. Don't believe me? Then come and see how I unravel the hidden gems of the Flex SDK and build 10 application in less than 60 minutes. You will learn how easy it is to build powerful view navigation with little code. You will explore all the different components that the Flex SDK provides you. Additionally you will learn in this code intense talk how to build effective custom item renders. Wait, there is even more, we'll throw in tips and tricks how to use Swiz to complement the SDKs built in mechanism to pass data among views, how to integrate google maps and Mapquest, and how to communicate effectively with a server using XML and JSON. You will acquire all the secret to build kick-ass applications that can be deployed on Apple App Store.

ipadiosflex
HTML5   ?
HTML5   ?
HTML5                                                           ?


•   Even Google was not rich enough to support all of the different mobile
    platforms from Apple’s AppStore to those of the BlackBerry, Windows
    Mobile, Android and the many variations of the Nokia platform

    - Vic Gundotra, Google Engineering VP

•   2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호”
    국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방
    식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고
    모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련
        3
HTML5 Key Elements for Mobile


• Offline        : LocalStorage, Web Database,
    App Cache

•               : Video, Audio, Cnavas

•           : Advanced Forms

•           : GeoLocation

Recommended for you

Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010

Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/

web appweb standardshtml5
Making your site mobile-friendly - Ignite Manchester 01.03.2010
Making your site mobile-friendly - Ignite Manchester 01.03.2010Making your site mobile-friendly - Ignite Manchester 01.03.2010
Making your site mobile-friendly - Ignite Manchester 01.03.2010

The document discusses making websites mobile-friendly by either creating a separate mobile site with a different domain (like m.example.com) or using a single adaptive site with fluid layouts, viewport meta tags, and CSS media queries to dynamically adjust the layout for different screen sizes. It recommends minimizing requests through techniques like CSS sprites and combining files to optimize performance on mobile networks.

htmlipadcss
"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)

Our December Refresh event was led by web and mobile designer Michael Dick who discussed how to extend the experience from the desktop to the mobile web, as well as tips & tricks you may utilize during the design & development of your mobile site. More info at http://RefreshBmore.org

mobile designrefreshbaltimore
HTML5 on Mobile

•             HTML5

•
•    Moblie      HTML5

•
Web app
HTML5 = HTML + CSS3 + JS API
JS API
• Client Side Storage
  - Web SQL Database
  - App Cache (cache-manifest)
  - Web Storage (localStorage, sessionStorage)


• Communication
  - Web Sockets
  - Web Workers


• Desktop experience
  - Notifications
  - Drag & Drop API


• Geolocation

Recommended for you

Xxx
XxxXxx
Xxx

This document is the HTML source code for the SlideShare homepage at www.slideshare.net. It contains metadata, scripts, and code for the site navigation, header, footer, and various page elements like notifications and ads. The document outlines the basic structure and components of the SlideShare homepage.

Iphone Presentation for MuMe09
Iphone Presentation for MuMe09Iphone Presentation for MuMe09
Iphone Presentation for MuMe09

This document discusses tools and frameworks for developing iPhone and iPod touch applications. It introduces the iPhone/iPod touch hardware features and describes different types of applications that can be created, including native, web, external platform, and jailbroken apps. It also outlines the steps to set up development environments on Windows and Mac systems. Finally, it provides examples of using the iUI framework to build simple web apps with iPhone interfaces.

mume09 iphone
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development

The document discusses mobile app development from a web developer's perspective. It covers topics such as web apps vs native apps, technologies for mobile development like HTML5 and frameworks, and specific techniques for mobile like viewport scaling, geolocation APIs, and offline storage. The document provides examples of code for implementing these mobile techniques.

windows mobileobjective-cblackberry
HTML
• Semantics (New tags, Link Relations,
  Microdata)
• Accessibility (ARIA roles)
• Web Forms 2.0 (Input Fields)
• Multimedia (Audio Tag,Video Tag)
• 2D & 3D drawing (Canvas, WebGL, SVG)
CSS

• Typography
• Visuals
• Transitions, Transforms & Animations
iPhone Web App

•           iPhone
    - App Store
    - App + Web Hybrid
    - iPad               Web App
    - DashCode


• Safari
    -
                    Add to Home Screen
Web App
• Online Web Application


• Offline Enabled Web Application

Recommended for you

移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发

This is a presentation to review and summarize the mobile websites that I have involved in. It includes many practical skills and my own experiences in the development of mobile websites.

web appmobile
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it

This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code

androidmobileiphone
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)

The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.

html5mobile
Web App
• Offline Web Application


• Hybrid Web Application
Web Apps On iPhone
iPhone Web App                                                          1

•                css
    <link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only
    screen and (max-width: 480px)” />
    <link rel=”stylesheet” type=”text/css” href=”desktop.css” media=”screen
    and (min-width: 481px)” />


• User Agent
    Mozilla/5.0 (iPad; U CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,
    like Gecko) Version 3.0 Mobile/4A93 Safari/419.3
    Mozilla/5.0 (iPhone; U CPU like Mac OS X; en) AppleWebKit/420+
    (KHTML, like Gecko) Version 3.0 Mobile/1A543 Safari/419.3
    Mozilla/5.0 (iPod; U CPU OS 3_2 like Mac OS X; en) AppleWebKit/
    531.21.10 (KHTML, like Gecko) Version 4.0.4 Mobile/7B334B Safari/531.21
    javascript : if((navigator.userAgent.match(/iPhone/i)) {}
    php : if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘iPod’) !== false) {}
iPhone Web App                                                            2
•   iPhone Browser         & viewport
    iPhone : 320 x 480px
                                                   Status Bar : 20px

                                                    URL Bar : 60px

                                                            : 320x356px


                                        Viewport :                       980px
                                        <meta name=‘viewport‘
                                             content=‘width=device-width;
                                                      initial-scale=1.0;
                                                      user-scalable=no’ />


                                                   Button Bar : 44px

Recommended for you

Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5

Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.

multi-screenhtml5twitter bootstrap
SmartPhone Design and Delivery
SmartPhone Design and DeliverySmartPhone Design and Delivery
SmartPhone Design and Delivery

The document discusses the state of the smartphone market in 2008 and provides guidance on developing applications for various smartphone platforms. It notes that in 2008, Nokia, RIM, and Samsung dominated the global smartphone market, with Apple growing 245%. It then provides an overview of tools and considerations for developing apps for platforms like iPhone, Android, Blackberry, and mobile Flash, noting that HTML, CSS, and JavaScript can be used to develop for many platforms. Challenges and differences between platforms like screen sizes, SDKs, and programming languages are outlined.

flashdeviceadobe
Mobile for web developers
Mobile for web developersMobile for web developers
Mobile for web developers

This document provides an overview of mobile web development best practices. It discusses viewport settings and using media queries to optimize layout for different screen sizes. It also recommends techniques like inline images, caching, and local storage to improve performance on mobile. The document encourages front-end logic and feature detection over device detection. Overall, it offers guidance on designing responsive websites that provide a good user experience across diverse mobile platforms and browsers.

framsiamobile webmobile
iPhone Web App                                                        3
•   Safari UI (URL Bar, Button Bar)
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
                                                                 /
    <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

    *

    *           URL Bar
    window.addEventListener(‘load’, function() {
        setTimeout(scrollTo, 0, 0, 1);
    }, false);

    * status-bar-style: default, black, black-translucent(   )

    * UI        Fullscreen
    if (navigator.standalone) {
        alert(‘                 ’);
    }
iPhone Web App                                                         4

•                (57x57)
    <link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
    <link rel=”apple-touch-icon” href=”apple-touch-icon-precomposed.png” />




• Startup
    <link rel=”apple-touch-startup-image” href=”/startup.png” />

    * Home
iPhone Web App                                                5
•                    Orientation
    function checkOrientation() {
       switch (window.orientation) {
          case 0: alert(‘Orientation: Portrait’); break;
          case 90:
          case -90: alert(‘Orientation: Landscape’); break;
       }
    }


•           Online
    function checkOnline() {
       if (navigator.onLine) {
           alert(‘There is a network connection’);
       else {
           alert(‘There is no network connection’);
       }
    }
iPhone Web App   6

Recommended for you

スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一

The document discusses various techniques for developing mobile web applications, including: 1. Using viewport meta tags to control layout on different screen sizes. 2. Storing cached content in Web Storage instead of cookies for better performance on mobile. 3. Loading images lazily via Ajax to improve perceived performance. 4. Detecting device orientation changes and resizing content appropriately for portrait and landscape modes.

androidmobilesmartphone
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011

PhoneGap allows developers to build mobile apps using standard web technologies like HTML, CSS, and JavaScript. It works by embedding a webview component within a native container, and provides a bridge for JavaScript to access some device APIs. PhoneGap has grown a large community and supports many mobile platforms. While it allows cross-platform development, apps are still packaged natively and some limitations remain. The future roadmap includes improved plugin support and new features like web sockets and background services to enhance the capabilities of hybrid mobile apps.

etehtml5phillyete
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile

This document discusses HTML5 on mobile devices. It begins by explaining why mobile web is growing and why HTML5 is well-suited for mobile. It then provides an overview of what HTML5 is and examples of features like forms, multimedia, geolocation that can be used on mobile. It also discusses considerations for mobile web development like responsive design and frameworks. The document recommends tools for mobile debugging and testing performance.

html5mobile
iPhone Web App   6
iPhone Web App   6
iPhone Web App   6
iPhone Web App   6

Recommended for you

Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010

slides of a presentation about cross-platform mobile app development I gave at MobileTechCon 2010 in Mainz (Germany). Links and additional information on the related blog post at http://HeikoBehrens.net/2010/10/11/cross-platform-app-development-for-iphone-android-co-—-a-comparison-i-presented-at-mobiletechcon-2010/

appcross-platformmainz
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today

PhoneGap allows developers to build mobile apps using HTML, CSS and JavaScript instead of relying on platform-specific languages like Objective-C or Java. The document discusses PhoneGap's capabilities and advantages, including writing apps once that run on multiple platforms, using web technologies that are widely known by developers, and leveraging growing browser capabilities on mobile through HTML5. It also outlines PhoneGap's APIs, tools, libraries, and community to help developers get started building cross-platform mobile apps.

html5where20phonegap
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code

The document discusses creating mobile apps without using native code. It describes how mobile apps today are often created natively, but that native apps have disadvantages like being expensive to create and only working on specific platforms. The document then presents alternatives like mobile web apps and hybrid apps. It provides examples of how to build a basic mobile web app using HTML, CSS, and responsive design techniques like viewports and media queries to make the app work well on different devices.

web apphtml5jquery mobile
iPhone Web App                           7
• iPhone style UI library
  * jQTouch - http://jqtouch.com
  * iUI - http://iui-js.org
  * WebApp.Net - http://webapp-net.com
iPhone Web App                                                           8
•
    <style type=”text/css” media=”screen”>@import “jqtouch.min.css”;</style>
    <style type=”text/css” media=”screen”>@import “themes/apple/
    theme.min.css”;</style>
    <script src=”jquery.1.3.2.min.js” type=”text/javascript” charset=”utf-8”></
    sript>
    <script src=”jqtouch.min.js” type=”text/javascript” charset=”utf-8”></
    script>
    <script type=”text/javascript”>
    var jQT = $.jQTouch({
        icon: ‘icon.png’,
        statusBar: ‘black’
    });
    </script>
iPhone Web App                                                        9
•   View
    <div id=”home”>
       <div class=”toolbar”>
          <h1>CPCGUARD</h1>
       </div>
       <ul>
          <li class=”arrow”><a href=”#content”>CPCGUARD         </a></li>
          <li class=”arrow”><a href=”#content”>S-POPUP</a></li>
          <li class=”arrow”><a href=”#content”>S-ON</a></li>
       </ul>
    </div>

    <div id=”content”>
      <div class=”toolbar”>
          <h1>CONTENT</h1>
          <a class=”button back” href=”#”>Back</a>
      </div>
    </div>
iPhone Web App   10

Recommended for you

Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania

The document summarizes key aspects of building Firefox OS to address issues with the mobile web. Firefox OS is Mozilla's attempt to make the web a first-class citizen on phones and tablets by starting with the web stack rather than trying to add the web to an existing OS. It has launched in several countries and aims to be an affordable alternative to feature phones and closed platforms. The architecture is based on Linux, Gecko, and web technologies. It provides predictable HTML5 support and addresses performance, fragmentation, security and hardware access through its design and web APIs.

imworldkeynotefirefoxos
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps

This document discusses how to build iPhone apps using only web technologies like HTML5, CSS3, and JavaScript without relying on native iOS frameworks or the App Store. Key points covered include how to create offline-capable apps using the cache manifest, emulate touch events with JavaScript, make the app feel native through CSS transforms and meta tags, and detect device capabilities. The example rubiks cube app demonstrates these techniques to create an offline-capable puzzle game experience on iPhone similar to a native app.

iphone html5 css3 barcamp barcampbrighton
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build

See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud. This session will cover: Getting started with the PhoneGap API Interacting with the native device features (camera, video) Accessing and using the geolocation sensors Compiling the application using PhoneGap Build

phonegap buildmobilemobile application development
Web app
Web app
Web app
Web app

Recommended for you

Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap

Introduction to PhoneGap Background Setting up the environment for Android Handling Events Working With The Device, The Network, And Notifications Getting Information from the Device Determining the Connection Type Using Notifications Using Alerts Using Confirmation Dialogs Using Beeps Using Vibrations Accelerometer Using the Acceleration Object Using Accelerometer Methods Media The Media Object Using Media Methods Camera Using The Camera Object Using The Getpicture Method Using Camera Options Geolocation Position, PositionError, Coord Geolocation Methods Geolocation Options Deployment using Phonegap (Android) Hands-on exercises Storage Available options Db object localStorage Files Filessystem File read & write Handling errors Contacts Creating contacts Finding contacts Handling errors Capture Video Audio Handling errors Hands-on exercises

phonegapandroidhtml5
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap

Introduction to PhoneGap Background Setting up the environment for Android Handling Events Working With The Device, The Network, And Notifications Getting Information from the Device Determining the Connection Type Using Notifications Using Alerts Using Confirmation Dialogs Using Beeps Using Vibrations Accelerometer Using the Acceleration Object Using Accelerometer Methods Media The Media Object Using Media Methods Camera Using The Camera Object Using The Getpicture Method Using Camera Options Geolocation Position, PositionError, Coord Geolocation Methods Geolocation Options Deployment using Phonegap (Android) Hands-on exercises Storage Available options Db object localStorage Files Filessystem File read & write Handling errors Contacts Creating contacts Finding contacts Handling errors Capture Video Audio Handling errors Hands-on exercises

javascriptandroid installationhtml5
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web

HTML 5 and associated technologies like CSS3 are making the mobile web more capable. Key points include: - HTML5 introduces tags for audio, video, offline storage and caching that allow richer mobile web applications. - CSS3 adds features like shadows, gradients, rounded corners, transitions and 3D transforms that improve visuals on mobile. - Gesture events in WebKit allow detection of swipes, pinches and other gestures on touchscreens. - HTML5 APIs for local storage, databases and the application cache enable offline functionality in mobile web apps. - While support varies, most mobile browsers now support many HTML5 and CSS3 features, allowing enhanced mobile web experiences.

html5 mobile web
Web app
Web app

More Related Content

What's hot

Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
Morris Singer
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
Hagai Asaban
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
Harvard Web Working Group
 
Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.
Matheus Cardoso
 
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Jared Smith
 
Building iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360FlexBuilding iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360Flex
danielwanja
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Patrick Lauke
 
Making your site mobile-friendly - Ignite Manchester 01.03.2010
Making your site mobile-friendly - Ignite Manchester 01.03.2010Making your site mobile-friendly - Ignite Manchester 01.03.2010
Making your site mobile-friendly - Ignite Manchester 01.03.2010
Patrick Lauke
 
"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)
Mike Brenner
 
Xxx
XxxXxx
Xxx
syfwan
 

What's hot (10)

Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 
Mobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLsMobile themes, QR codes, and shortURLs
Mobile themes, QR codes, and shortURLs
 
Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.
 
Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)
 
Building iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360FlexBuilding iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360Flex
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
Making your site mobile-friendly - Ignite Manchester 01.03.2010
Making your site mobile-friendly - Ignite Manchester 01.03.2010Making your site mobile-friendly - Ignite Manchester 01.03.2010
Making your site mobile-friendly - Ignite Manchester 01.03.2010
 
"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)"Designing for the Mobile Web" by Michael Dick (December 2010)
"Designing for the Mobile Web" by Michael Dick (December 2010)
 
Xxx
XxxXxx
Xxx
 

Similar to Web app

Iphone Presentation for MuMe09
Iphone Presentation for MuMe09Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
Gonzalo Parra
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
Chris Morrell
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
Zhang Xiaoxue
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
Jonathan Snook
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
Adam Lu
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
Ron Reiter
 
SmartPhone Design and Delivery
SmartPhone Design and DeliverySmartPhone Design and Delivery
SmartPhone Design and Delivery
Jason Diehl
 
Mobile for web developers
Mobile for web developersMobile for web developers
Mobile for web developers
Jon Arne Sæterås
 
スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一
okyawa
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
davyjones
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
Adam Lu
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Heiko Behrens
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
Joakim Kemeny
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
Christian Heilmann
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
Remy Sharp
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Chris Griffith
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
Rakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
Rakesh Jha
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web
MrJ1971
 

Similar to Web app (20)

Iphone Presentation for MuMe09
Iphone Presentation for MuMe09Iphone Presentation for MuMe09
Iphone Presentation for MuMe09
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
SmartPhone Design and Delivery
SmartPhone Design and DeliverySmartPhone Design and Delivery
SmartPhone Design and Delivery
 
Mobile for web developers
Mobile for web developersMobile for web developers
Mobile for web developers
 
スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
 
Fixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World RomaniaFixing the mobile web - Internet World Romania
Fixing the mobile web - Internet World Romania
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web
 

Recently uploaded

Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 

Recently uploaded (20)

Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 

Web app

  • 1. Web Apps 2010.08.18
  • 2. Web App vs Native App • Web App ? web app web app iTunes App Store Object-C • Native App ? Object-C iTunes App Store
  • 3. Web App vs Native App Web App Native App HTML, CSS, Javascript Objective-C(iPhone), Java(Android) XCode(iPhone), Eclipse(Android) , iUI, jQTouch... Cocoa Touch(iPhone), UI Framework(Android) Mac Mac (iPhone), Android App $99(iPhone) or $35(Android) - / ... App Store/Market / & (iPhone) Android/Blackberry
  • 4. HTML5 ? • iPhone, Android HTML5 WebKit • iOS, Android, Blackberry, , Windows Mobile, Windows Phone 7
  • 5. HTML5 ?
  • 6. HTML5 ?
  • 7. HTML5 ? • Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP • 2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호” 국민들이 다양한 모바일 ��기를 사용할 수 있도록 ‘모바일 앱(App)’ 방 식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고 모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련 3
  • 8. HTML5 Key Elements for Mobile • Offline : LocalStorage, Web Database, App Cache • : Video, Audio, Cnavas • : Advanced Forms • : GeoLocation
  • 9. HTML5 on Mobile • HTML5 • • Moblie HTML5 •
  • 11. HTML5 = HTML + CSS3 + JS API
  • 12. JS API • Client Side Storage - Web SQL Database - App Cache (cache-manifest) - Web Storage (localStorage, sessionStorage) • Communication - Web Sockets - Web Workers • Desktop experience - Notifications - Drag & Drop API • Geolocation
  • 13. HTML • Semantics (New tags, Link Relations, Microdata) • Accessibility (ARIA roles) • Web Forms 2.0 (Input Fields) • Multimedia (Audio Tag,Video Tag) • 2D & 3D drawing (Canvas, WebGL, SVG)
  • 14. CSS • Typography • Visuals • Transitions, Transforms & Animations
  • 15. iPhone Web App • iPhone - App Store - App + Web Hybrid - iPad Web App - DashCode • Safari - Add to Home Screen
  • 16. Web App • Online Web Application • Offline Enabled Web Application
  • 17. Web App • Offline Web Application • Hybrid Web Application
  • 18. Web Apps On iPhone
  • 19. iPhone Web App 1 • css <link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only screen and (max-width: 480px)” /> <link rel=”stylesheet” type=”text/css” href=”desktop.css” media=”screen and (min-width: 481px)” /> • User Agent Mozilla/5.0 (iPad; U CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version 3.0 Mobile/4A93 Safari/419.3 Mozilla/5.0 (iPhone; U CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version 3.0 Mobile/1A543 Safari/419.3 Mozilla/5.0 (iPod; U CPU OS 3_2 like Mac OS X; en) AppleWebKit/ 531.21.10 (KHTML, like Gecko) Version 4.0.4 Mobile/7B334B Safari/531.21 javascript : if((navigator.userAgent.match(/iPhone/i)) {} php : if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘iPod’) !== false) {}
  • 20. iPhone Web App 2 • iPhone Browser & viewport iPhone : 320 x 480px Status Bar : 20px URL Bar : 60px : 320x356px Viewport : 980px <meta name=‘viewport‘ content=‘width=device-width; initial-scale=1.0; user-scalable=no’ /> Button Bar : 44px
  • 21. iPhone Web App 3 • Safari UI (URL Bar, Button Bar) <meta name=”apple-mobile-web-app-capable” content=”yes” /> / <meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> * * URL Bar window.addEventListener(‘load’, function() { setTimeout(scrollTo, 0, 0, 1); }, false); * status-bar-style: default, black, black-translucent( ) * UI Fullscreen if (navigator.standalone) { alert(‘ ’); }
  • 22. iPhone Web App 4 • (57x57) <link rel=”apple-touch-icon” href=”apple-touch-icon.png” /> <link rel=”apple-touch-icon” href=”apple-touch-icon-precomposed.png” /> • Startup <link rel=”apple-touch-startup-image” href=”/startup.png” /> * Home
  • 23. iPhone Web App 5 • Orientation function checkOrientation() { switch (window.orientation) { case 0: alert(‘Orientation: Portrait’); break; case 90: case -90: alert(‘Orientation: Landscape’); break; } } • Online function checkOnline() { if (navigator.onLine) { alert(‘There is a network connection’); else { alert(‘There is no network connection’); } }
  • 29. iPhone Web App 7 • iPhone style UI library * jQTouch - http://jqtouch.com * iUI - http://iui-js.org * WebApp.Net - http://webapp-net.com
  • 30. iPhone Web App 8 • <style type=”text/css” media=”screen”>@import “jqtouch.min.css”;</style> <style type=”text/css” media=”screen”>@import “themes/apple/ theme.min.css”;</style> <script src=”jquery.1.3.2.min.js” type=”text/javascript” charset=”utf-8”></ sript> <script src=”jqtouch.min.js” type=”text/javascript” charset=”utf-8”></ script> <script type=”text/javascript”> var jQT = $.jQTouch({ icon: ‘icon.png’, statusBar: ‘black’ }); </script>
  • 31. iPhone Web App 9 • View <div id=”home”> <div class=”toolbar”> <h1>CPCGUARD</h1> </div> <ul> <li class=”arrow”><a href=”#content”>CPCGUARD </a></li> <li class=”arrow”><a href=”#content”>S-POPUP</a></li> <li class=”arrow”><a href=”#content”>S-ON</a></li> </ul> </div> <div id=”content”> <div class=”toolbar”> <h1>CONTENT</h1> <a class=”button back” href=”#”>Back</a> </div> </div>

Editor's Notes